<template>
  <section class="m-card m-list-table">
    <div class="list-title">
      数据列表
      <div class="right">

      </div>
    </div>
    <ym-table :data='data'
              :total="total"
              :loading='loading'
              :options="options"
              limit-height
              border
              :currentPage="currentPage"
              :perPage="perPage"
              @load='handlerLoad'
              @cell-dblclick="cellDblclick"></ym-table>
    <ym-dialog :visible.sync="reservation.showReservationDialog"
               width='600px'
               top='30px'
               hide-footer>
      <el-form label-position="right"
               label-width="100px"
               :model="reservation.form"
               :rules="rules"
               ref="form">
        <!-- <el-form-item label="预约门店"
                      prop="预约门店">
          <el-select v-model="reservation.form.预约门店"
                     placeholder="选择门店">
            <el-option v-for="(item,index) in storeOpts"
                       :key="index"
                       :label="item.namecode"
                       :value='item.id'></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="预约时间"
                      prop="预约时间">
          <el-date-picker v-model="reservation.form.预约时间"
                          type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="到店时间"
                      prop="到店时间">
          <el-date-picker v-model="reservation.form.到店时间"
                          type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
        </el-form-item> -->
        <el-form-item label="预约人"
                      prop="预约人">
          <el-input v-model="reservation.form.预约人"
                    placeholder="请输入"
                    style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="预约电话"
                      prop="预约电话">
          <el-input v-model="reservation.form.预约电话"
                    placeholder="请输入"
                    style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="预约人数"
                      prop="人数">
          <el-input v-model="reservation.form.人数"
                    type="number"
                    placeholder="请输入"
                    style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="预约备注">
          <el-input v-model="reservation.form.预约备注"
                    type="textarea"
                    placeholder="请输入"
                    style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="发票类型">
          <el-select v-model="reservation.form.发票类型"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="(item,index) in invoiceOpts"
                       :key="index"
                       :label="item.namecode"
                       :value='item.namecode'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票抬头"
                      v-show="reservation.form.发票类型">
          <el-input v-model="reservation.form.发票抬头"
                    placeholder="请输入"
                    style="width:300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="reservation.showReservationDialog = false"
                   size="small">关闭</el-button>
        <el-button @click="submit"
                   type="primary"
                   :loading='reservation.submitLoading'
                   size="small">保存</el-button>
      </div>
    </ym-dialog>
  </section>
</template>
<script>
import { cloneDeep } from 'lodash'
import dayjs from 'dayjs'
import { accSub, accAdd } from '@/utils/calculate'
import listTable from '@/views/mixins/list-table'
export default {
  mixins: [listTable],
  data () {
    var checkPeopleNumber = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入预约人数'));
      } else if (Number(value) < 1) {
        callback(new Error('预约人数最小为1人'));
      } else {
        callback()
      }
    }
    return {
      selectRow: {},
      storeOpts: [],
      invoiceOpts: [],
      rules: {
        // 预约门店: [{ required: true, message: '请选择', trigger: 'change' }],
        预约时间: [{ required: true, message: '请选择', trigger: 'change' }],
        到店时间: [{ required: true, message: '请选择', trigger: 'change' }],
        预约人: [{ required: true, message: '请输入', trigger: 'blur' }],
        预约电话: [{ required: true, message: '请输入', trigger: 'blur' }],
        人数: [{ required: true, trigger: 'blur', validator: checkPeopleNumber }],
      },
      reservation: {
        showReservationDialog: false,
        form: {
          预约人: '',
          预约电话: '',
          // 预约门店: '',
          人数: '',
          // 到店时间: '',
          预约时间: '',
          预约备注: '',
          发票抬头: '',
          发票类型: ""
        }
      },
      options: {
        config: [
          {
            label: '标识',
            width: '80',
            render: (h, params) => {
              return h('div', params.row.id)
            }
          },
          {
            label: '下单时间',
            width: '160',
            render: (h, params) => {
              return h('div', this.formatDate1(params.row.下单时间))
            }
          },
          {
            label: '预约门店',
            width: '200',
            render: (h, params) => {
              let { store } = params.row
              return h('div', store && store.名称)
            }
          },
          {
            label: '下单用户',
            render: (h, params) => {
              let { user } = params.row
              return h('div', user && user.用户名称)
            }
          },
          {
            label: '预约时间',
            width: '160',
            render: (h, params) => {
              return h('div', this.formatDate1(params.row.预约时间))
            }
          },
          // {
          //   label: '到店时间',
          //   width: '160',
          //   render: (h, params) => {
          //     return h('div', this.formatDate1(params.row.到店时间))
          //   }
          // },
          {
            label: '标题名',
            width: 120,
            render: (h, params) => {
              return h('div', params.row.标题名)
            }
          },
          // {
          //   label: '预约人',
          //   width: 120,
          //   render: (h, params) => {
          //     return h('div', params.row.预约人)
          //   }
          // },
          {
            label: '预约手机号',
            width: 130,
            render: (h, params) => {
              return h('div', params.row.预约电话)
            }
          },
          {
            label: '人数',
            align: 'center',
            width: 80,
            render: (h, params) => {
              return h('div', params.row.人数)
            }
          },
          {
            label: '优惠金额',
            render: (h, params) => {
              return h('div', "￥" + params.row.优惠金额)
            }
          },
          {
            label: '实收金额',
            render: (h, params) => {
              return h('div', "￥" + params.row.实收金额)
            }
          },
          {
            label: '状态',
            align: 'center',
            render: (h, params) => {
              let { NodeType } = params.row
              return h('div', NodeType && NodeType.namecode)
            }
          },
          {
            label: '预约备注',
            popover: true,
            render: (h, params) => {
              return h('div', params.row.预约备注)
            }
          },
          {
            label: '发票信息',
            render: (h, params) => {
              return h('div', [
                h('div', params.row.发票类型),
                h('div', params.row.发票抬头)
              ])
            }
          },
          {
            label: '操作',
            align: 'right',
            fixed: 'right',
            render: (h, params) => {
              return h('div', [
                h('permission-control', {
                  props: {
                    permission: '/merchant/operation/service-order/view'
                  }
                }, [
                  h('el-button', {
                    props: {
                      type: 'text',
                      size: 'small',
                      marginRight: '0'
                    },
                    on: {
                      click: () => {
                        this.toPath(`/merchant/operation/service-order/detail?id=${params.row.id}`)
                      }
                    }
                  }, '查看订单'),
                ]),
                h('permission-control', {
                  props: {
                    permission: '/merchant/operation/service-order/edit'
                  }
                }, [
                  h('el-button', {
                    props: {
                      type: 'text',
                      size: 'small',
                      marginRight: '0'
                    },
                    on: {
                      click: () => {
                        this.selectRow = cloneDeep(params.row)
                        for (var key in this.reservation.form) {
                          this.reservation.form[key] = this.selectRow[key]
                        }
                        this.reservation.showReservationDialog = true
                      }
                    }
                  }, '修改订单'),
                ])
              ])
            }
          }
        ]
      }
    }
  },
  filters: {
    filterDate (val) {
      return val ? dayjs.unix(val).format('YYYY-MM-DD HH:mm') : ''
    }
  },
  async mounted () {
    this.storeOpts = await this.$store.dispatch('options/getStoreOptions', 'exclude')
    this.invoiceOpts = await this.$store.dispatch('options/getOptions', { busiName: 'ServicOrders', rela: 217 })

  },
  methods: {
    cellDblclick (row, column, cell, event) {
      if (!['操作'].includes(column.label)) {
        this.$set(this.selectRow, 'isEditReservationPeople', false)
        this.$set(this.selectRow, 'isEditPeopleNum', false)
        this.$set(this.selectRow, 'isEditTime', false)
        this.$set(this.selectRow, 'isEditStore', false)
        this.$set(this.selectRow, 'isEditReservationMobile', false)
        this.$set(this.selectRow, 'isEditToStoreTime', false)
        if (column.label == '预约人') {
          this.$set(row, 'isEditReservationPeople', true)
        } else if (column.label == '人数') {
          this.$set(row, 'isEditPeopleNum', true)
        } else if (column.label == '预约时间') {
          this.$set(row, 'isEditTime', true)
        } else if (column.label == '预约门店') {
          this.$set(row, 'isEditStore', true)
        } else if (column.label == '预约电话') {
          this.$set(row, 'isEditReservationMobile', true)
        } else if (column.label == '到店时间') {
          this.$set(row, 'isEditToStoreTime', true)
        }
        this.selectRow = row
      }
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let data = cloneDeep(this.reservation.form)
          data.到店时间 = this.formatDate1(data.到店时间)
          data.预约时间 = this.formatDate1(data.预约时间)
          if (data.发票类型 && !data.发票抬头) {
            this.$message('选择发票类型，则发票抬头不能为空')
            return
          }
          if (!data.发票类型) data.发票抬头 = ''
          this.updateRow(data)
        } else {
          return false
        }
      })
    },
    //修改
    updateRow (data) {
      try {
        this.reservation.submitLoading = true
        this.$command.execute({
          api: `/api/UpdateById/ServicOrders`,
          params: { rowId: this.selectRow.id },
          data
        }).then(res => {
          this.reservation.showReservationDialog = false
          this.reservation.submitLoading = false
          this.$message.success('修改成功')
          this.refreshList()
        })
      } catch (err) {
        this.reservation.submitLoading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
